<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .swiper-container{
            width: 300px;
            height: 146px;
        }
        ul {
            list-style-type: none;;
        }
        .swiper-slide img {
            width: 100%;
            display: block;
        }
    </style>
</head>
<body>
<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">
            <a href="javascript:;">
                <img class="broadcast_first" src="./img/broadcast_picture1.jpg">
            </a>
        </li>
        <li class="swiper-slide">
            <a href="javascript:;">
                <img class="broadcast_second" src="./img/broadcast_picture2.jpg">
            </a>
        </li>
        <li class="swiper-slide">
            <a href="javascript:;">
                <img class="broadcast_third" src="./img/broadcast_picture3.jpg">
            </a>
        </li>
    </ul> 
</div>
    <script src="./js/swiper.min.js"></script>
    <script>    
        // 初始化对象 一般的插件都需要这样
        var mySwiper1 = new Swiper('.swiper-container',{
            effect : 'cube',
            cubeEffect: {
                slideShadows: true,
                shadow: true,
                shadowOffset: 100,
                shadowScale: 0.6
            },
        });

    </script>
</body>
</html>